<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>详细信息</title>
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        a{
            color: #009688;
        }
        .box{
            width:1400px;
            margin: 0 100px;
        }
        .table_head{
            color: #676767;
            font-size: 26px;
            text-align: center;
            line-height: 60px;
            width: 1500px;
            height: 60px;
        }
        .view_title{
            width: 150px;
            height: 60px;
            font-size: 20px;
            color:#666;
            line-height: 60px;
            border: 1px solid #A1A1A1;
        }
        .view_title_left{
            margin-left: 20px;
        }
        .table_body{
            display: inline-block;
        }
        .body_title{
            width: 150px;
            height: 55px;
            background: #F6F6F6;
            text-align: center;
            line-height: 55px;
            border: 1px solid #A1A1A1;
            font-size: 17px;
            color: #696969;
            font-weight: 600;
        }
        .body_content{
            width: 310px;
            height: 55px;
            text-align: center;
            line-height: 55px;
            border: 1px solid #A1A1A1;
            color: #979797;
        }
        .show_picture{
            width: 1500px;
            height: 190px;
            border: 1px solid #A1A1A1;
        }
        .show_description{
            width: 1500px;
            height: 135px;
            border: 1px solid #A1A1A1;
        }
        .preview{
            width: 150px;
            height: 190px;
            background: #F6F6F6;
            text-align: center;
            line-height: 190px;
            font-size: 17px;
            color: #696969;
            font-weight: 600;
            border-right: 1px solid #A1A1A1;
        }
        .previewComments{
            width: 150px;
            height: 135px;
            background: #F6F6F6;
            text-align: center;
            line-height: 135px;
            border-right: 1px solid #A1A1A1;
            font-size: 17px;
            color: #696969;
            font-weight: 600;
        }
        .content{
            width:1200px;
            height: 108px;
            margin-left: 10px;
            margin-top: 5px;
        }
    </style>
</head>
<body>
<div class="box" >
    <table>
        <tr class="table_head">
            <th>优惠券详细信息</th>
        </tr>
        <tr>
            <th class="table_body body_title">优惠券编号：</th>
            <th class="table_body body_content" id="couponCode"></th>
            <th class="table_body body_title">优惠券金额：</th>
            <th class="table_body body_content" id="couponPrice"></th>
            <th class="table_body body_title">优惠券名称：</th>
            <th class="table_body body_content" id="couponName"></th>
        </tr>
        <tr>
            <th class="table_body body_title">开始时间：</th>
            <th class="table_body body_content" id="startDate"></th>
            <th class="table_body body_title">结束时间：</th>
            <th class="table_body body_content" id="endDate"></th>
            <th class="table_body body_title">状态：</th>
            <th class="table_body body_content" id="online"></th>
        </tr>
        <tr>
            <th class="table_body body_title">发放方式：</th>
            <th class="table_body body_content" id="grant"></th>
            <th class="table_body body_title">发行数：</th>
            <th class="table_body body_content" id="issueQuantity"></th>
            <th class="table_body body_title">已使用：</th>
            <th class="table_body body_content" id="used"></th>
        </tr>
        <tr class="view_title">
            <th class="table_body view_title_left" ><i class="layui-icon layui-icon-picture"></i>&nbsp;&nbsp;优惠券图片</th>
        </tr>
        <tr class="show_picture">
            <th class="table_body preview">预览图：</th>
            <th class="table_body"><img id="pricuteUrl" style="width: 175px;height: 175px;margin-left: 10px;margin-top: 5px;"></th>
        </tr>
        <tr class="view_title">
            <th class="table_body view_title_left"><i class="layui-icon layui-icon-chart-screen"></i>&nbsp;&nbsp;优惠券类型</th>
        </tr>
        <tr class="show_description">
            <th class="table_body previewComments">类型：</th>
            <th class="table_body content" id="type"></th>
        </tr>
    </table>
</div>
</body>
</html>